
// Vue-router4 的不同
// 1. 创建路由实例 createRouter 
// 2. 修改路由模式 createWebHistory, createWebHashHistory 两个方法来处理
// 3. 匹配所有路由不在使用 * , 而是使用动态路径参数 {path: '/:pathMatch(.*)*', }
// 4. vue-router中内置 router-link, 新增作用域插槽的用法,废弃了tag属性,开启底层定制写法
// 5. Vue-router4 新增组合式写法 (组合式写法中如何获取 router route) => 使用useRoute,useRouter
// 6. 组件内路由守卫 新增组合式写法   =>  { onBeforeRouteLeave, onBeforeRouteUpdate } 





import { createRouter,createWebHashHistory} from 'vue-router'
import HomeView from '../views/HomeView.vue'

let routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/mda',
    name: 'mad',
    component: () => import('../views/MdaView.vue')
  },
  {
    path: '/counter',
    name: 'counter',
    component: () => import('../views/counterView.vue')
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  },
  {
    path: '/404',
    name: 'not-found',
    component: () => import('../views/NotFoundView.vue')
  },
  {
    // path:"*",  // vue-router3 中的写法(vue-router4不适用)

    // 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
    path: '/:pathMatch(.*)*',   // 我们可以使用自定义的 路径参数 正则表达式，在 路径参数 后面的括号中加入 正则表达式 :
    redirect:"/404",
  }
]

const router = createRouter({
  // history: createWebHistory(import.meta.env.BASE_URL), //  history
  history: createWebHashHistory(import.meta.env.BASE_URL),  // hash
  routes: routes
})

export default router
